<template>
	<view class="container">
		<uni-nav-bar @clickLeft="clickLeft" fixed="true" left-icon="arrowleft" title="Collectors" background-color="#d44439" color="white"></uni-nav-bar>
		<view class="peoplelist">
			<view class="peoplelisr_item" v-for="item in subscribers" :key="item.userId" @click="jump(item.userId)">
				<view class="img">
					<!--  #ifdef  MP-WEIXIN -->
					<image :src="item.avatarUrl"></image>
					<!--  #endif -->
					<!--  #ifndef  MP-WEIXIN -->
					<img  v-lazy="item.avatarUrl">
					<!--  #endif -->
				</view>
				<view class="name">
					<view class="username">{{item.nickname}}</view>
					<view class="jieshao">{{item.signature}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {subscribers} from '../../api/SouSuo/SouSuo.js'
	export default {
		onLoad(option) {
			subscribers({id:option.id,limit:50}).then(res => {
				this.subscribers = res.subscribers
			})
		},
		data() {
			return {
				subscribers:[]
			}
		},
		methods:{
			clickLeft(){
				uni.navigateBack({
				    delta: 1
				})
			},
			jump(id){
				uni.navigateTo({
					url:'../UserInfo/UserInfo?userid=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width: 750rpx;
		.peoplelist{
			margin-top: 20rpx;
			width: 100%;
			.peoplelisr_item{
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				.img{
					width: 70rpx;
					height: 70rpx;
					//background-color: blue;
					margin-left: 20rpx;
					/*  #ifdef  MP-WEIXIN  */
					image{
						width: 100%;
						height: 100%;
						border-radius: 100rpx;
					}
					/*  #endif  */
					/*  #ifndef  MP-WEIXIN  */
					img{
						width: 100%;
						height: 100%;
						border-radius: 100rpx;
					}
					/*  #endif  */
					
				}
				.name{
					width:70%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 30rpx;
					.jieshao{
						font-size: 20rpx;
						color: grey;
					}
				}
			}
		}
	}
</style>
